<template>
<div>
    <common-header
        :title="title"
        :type=2></common-header>
    <div class="mui-content">
        <mt-navbar v-model="selected">
            <mt-tab-item 
                v-for="(item, index) in categoryList" 
                :key="index" 
                :id="item.value"
                @click="choose(item.value)">{{ item.label }}</mt-tab-item>
        </mt-navbar>
        <scroller
            ref="my_scroller"
            class="loading-div"
            style="top: 90px"
            :on-refresh="refresh"
            :on-infinite="infinite">
            <ul class="mui-table-view auditUl">
                <li class="ui-table-view-cell auditLis sDemandLis sDemandLis-Txun" v-for="band in list" :key="band.id" @click="bandDetail(band)">
                    <ul>
                        <li>
                            <p class="sDemandLis-num">波段号:</p>
                            <p class="sDemandLis-an">{{band.bandname}}</p>
                        </li>
                        <li>
                            <p class="sDemandLis-num">风格:</p>
                            <p class="sDemandLis-an">{{band.fgText}}</p>
                        </li>
                        <li>
                            <p class="sDemandLis-num">品类:</p>
                            <p class="sDemandLis-an">{{band.xlText}}</p>
                        </li>
                        <li>
                            <p class="sDemandLis-num">款&nbsp;&nbsp;&nbsp;式:</p>
                            <p class="sDemandLis-an">4</p>
                        </li>
                        <li>
                            <p class="sDemandLis-num">传图截止日期:</p>
                            <p class="sDemandLis-an">{{band.uploaddate}}</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </scroller>
    </div>
</div>
</template>
<script>
import { Navbar, TabItem, TabComtainer, Cell } from 'mint-ui'
import { mapState ,mapMutations } from 'vuex'
import API from '@/service/api'
import commonHeader from '@/components/commonHeader.vue'
export default {
    components: { commonHeader, Navbar, TabItem, TabComtainer, Cell },
    data() {
        return {
            title: '样衣波段需求',
            list: [],
            categoryList: [],
            selected: null,
            isNoData: false,
            pageSize: 10,
            pageIndex: 1,
        }
    },
    watch: {
        selected(newValue) {
            if(newValue) this.RECORD_SEARCH_VALUE({})
            this.list = []
            this.isNoData = false
            this.pageIndex = 1
            this.$refs.my_scroller.finishInfinite(false)
        }
    },
    computed: { ...mapState(['search_value']) },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING', 'RECORD_SEARCH_VALUE', 'RECORD_BAND_ID', 'RECORD_BAND_NO' ] ),
        async refresh (done) {
            this.list = []
            this.isNoData = false
            this.pageIndex = 1
            this.$refs.my_scroller.finishInfinite(false)
            done()
        },
        async infinite (done) {
            if(this.isNoData) return this.$refs.my_scroller.finishInfinite(true)
            let res = await this.search(this.selected)
            setTimeout(() => {
                if(res.list.length==0){//判断数是否加载完成，就让数据截停
                    this.isNoData = true
                }else{
                    this.list = [...this.list, ...res.list]
                    this.pageIndex++
                }
                done()
            }, 1000)
        },
        initialization() {
            //获取样衣列表
            API.dic.getBaseCateGoryList().then(res=> {
                this.categoryList = [ { label: '全部', value: null } ,...res ]
                this.UPDATE_SHOW_LOADING(false)
		    })
        },
        search(id) {
            let data = {}
            if(id) data = { dlid: id }
            else data = this.search_value
            data.pageSize= this.pageSize
            data.pageIndex= this.pageIndex
            return API.band.getBandList(data)
        },
        bandDetail(item) {
            this.RECORD_BAND_ID(item.bandid)
            this.RECORD_BAND_NO(item.id)
            this.$router.push( { name: 'bandDetail'} )
        },
    },
    created() {
        this.initialization()
    },
}
</script>
<style scoped lang="less">
/*样衣波段需求*/
.sDemandLis{
	background-color: #fff;
	width: calc(100% - 1.6rem);
	margin: 0.8rem 0.8rem 0 0.8rem !important;
	border-top-left-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;
	border-left: 3px solid transparent;
	padding: 1.2rem 1.6rem;
}
.sDemandLis-Txun{
	border-color: #2772ff;
}
.sDemand-details-Txun{
	color: #2772ff;
}
.sDemandLis-shifts{
	border-color: #ff8a00;
}
.sDemandLis-ku{
	border-color: #fe1e53;
}
.sDemandLis-shirts{
	border-color: #8E0CE8;
}
.sDemandLis-wai{
	border-color: #01cbf6;
}
.sDemandLis-pei{
	border-color: #19e849;
}
</style>
